<template>
  <div class='big-screen-wrapper' ref="imageWrapper">
    <div class='title-wrapper'>
      <div class='title'>项目分包队伍引进模型</div>
      <div class='category'>
        <a-form layout='inline' style='display: flex;justify-content: space-between'>
          <a-form-item>
            <a-input @click='showSelectModel' :title='queryParam.depName' placeholder='单位'
                     v-model='queryParam.depName'></a-input>
          </a-form-item>
          <a-form-item>
            <a-input @click='showSelectModel' :title='queryParam.proName' placeholder='项目'
                     v-model='queryParam.proName'></a-input>
          </a-form-item>
          <a-form-item>
            <a-input @click='showSelectModel' :title='datetoSting' placeholder='时间'
                     v-model='datetoSting'></a-input>
          </a-form-item>
        </a-form>
        <!--        <a-button @click='showSelectModel'>查询</a-button>-->
      </div>
    </div>
    <div class='content-wrapper'>
      <div class="left-wrapper">
        <div class='left-wrapper-1'>
          <div class='chart-title'>本项目分包类别比重(合同额)</div>
          <chartPie
            v-if='leftWrapper1'
            :sourceChartOption='leftWrapper1'
          ></chartPie>
        </div>
        <div class='left-wrapper-2'>
          <div class='chart-title'>本项目分包类别占比(合同数)</div>
          <chartHalfPie
            v-if='leftWrapper2'
            :sourceChartOption='leftWrapper2'
          ></chartHalfPie>
        </div>
        <div class='left-wrapper-3'>
          <div class='chart-title'>同规模项目分包合同额分析</div>
          <div class='select-wrapper'>
            <a-row type='flex'>
              <a-col :span='4'>
                <img class='left' src='~@/assets/lwdwyj/left-icon-1.png' alt=''>
                时期
              </a-col>
              <a-col :span='9'>
                <a-date-picker
                  mode="year"
                  placeholder="请选择年份"
                  format='YYYY'
                  value-format="yyyy-MM-dd"
                  v-model='leftQuery.startTime'
                  :open='startYearPickShow'
                  style='width: 100%'
                  @panelChange="handlePanelStartChange"
                  @openChange="handleOpenStartChange"/>
              </a-col>
              <span style="margin: 0 3px"> 至 </span>
              <a-col :span='9'>
                <a-date-picker
                  mode="year"
                  placeholder="请选择年份"
                  format='YYYY'
                  value-format="yyyy-MM-dd"
                  v-model='leftQuery.endTime'
                  :open='endYearPickShow'
                  style='width: 100%'
                  @panelChange="handlePanelEndChange"
                  @openChange="handleOpenEndChange"/>
              </a-col>
            </a-row>
            <a-row type='flex'>
              <a-col :span='4'>
                <img class='left' src='~@/assets/lwdwyj/left-icon-2.png' alt=''>
                单位
              </a-col>
              <a-col :span='20'>
                <a-radio-group v-model="leftQuery.isDept" :options='leftWrapper_selectOption1'/>
              </a-col>
            </a-row>
            <a-row type='flex'>
              <a-col :span='4'>
                <img class='left' src='~@/assets/lwdwyj/left-icon-3.png' alt=''>
                地域
              </a-col>
              <a-col :span='20'>
                <a-radio-group v-model="leftQuery.isRegion" :options='leftWrapper_selectOption2'/>
              </a-col>
            </a-row>
          </div>
          <chartStackBar
            style="borderTop: 1px  #13D4D5 dashed;"
            v-if='leftWrapper3'
            :sourceChartOption='leftWrapper3'
          ></chartStackBar>
        </div>
      </div>
      <div :class="'middle-wrapper'">
        <div class='middle-wrapper-1'>
          <div class='item-wrapper-1'>
            <div style="margin: 12px auto;color: white;width: 50px">
              全部
            </div>
            <div style="margin: 10px auto;color: white;width: 50px">
              <span style="font-size: 18px;color: #87e8de;font-weight: bold">{{middleWrapper1.num1}}</span> 个
            </div>
          </div>
          <div class='item-wrapper-2'>
            <div style="margin: 12px auto;color: white;width: 50px">
              <span style="display:inline-block;width: 100px">企业黑名单数量</span>
            </div>
            <div style="margin: 10px auto;color: white;width: 50px">
              <span style="font-size: 18px;color: #ff6987;font-weight: bold">{{middleWrapper1.num2}}</span> 个
            </div>
          </div>
          <div class='item-wrapper-3'>
            <div style="margin: 12px auto;color: white;width: 60px">
              合同总额
            </div>
            <div style="margin: 10px auto;color: white;width: 155px;text-indent: 45px">
              <span style="font-size: 18px;color: #31eeae;font-weight: bold">{{middleWrapper1.num3}}</span> 万元
            </div>
          </div>
        </div>
        <div class='middle-wrapper-2' style="margin-top: 15px">
          <div
            style="width: 100px;height: 40px;
            line-height:40px;
            text-align: center;
            background: rgba(71,255,234,0.24);
            border-top-right-radius: 10px;
            border:1px solid #27fdfd;
            color: #f5aa5e;font-weight: bold">
            队伍明细 {{count}}
          </div>
          <div style="padding: 15px;border: 1px solid #27fdfd">
            <a-table :columns='middleWrapper2Cols' :data-source='middleWrapper2Data' :pagination="ipagination"
                     @change="handleTableChange" :row-class-name="setClassName">
              <template slot="subEntpNm" slot-scope="subEntpNm">
                <j-ellipsis :value="subEntpNm" :length="5"/>
              </template>
              <template slot="blackFlag" slot-scope="text, record, index">
                <img @click="addYd(record)" :src="error" v-show="record.blackFlag === 0" alt="">
              </template>
            </a-table>
          </div>
        </div>
      </div>
      <div :class="'right-wrapper'">
        <div class='right-wrapper-1'>
          <div class='chart-title'>涉及其他单位黑名单</div>
          <a-table style='margin-top: 20px' :columns='rightWrapper1Cols' :data-source='rightWrapper1Data'
                   :pagination='false' :scroll='{ y: 190 }'>
            <template slot="projDeptNm" slot-scope="projDeptNm">
              <j-ellipsis :value="projDeptNm" :length="7"/>
            </template>
            <template slot="projNm" slot-scope="projNm">
              <j-ellipsis :value="projNm" :length="7"/>
            </template>
          </a-table>
        </div>
        <div class='right-wrapper-2'>
          <div class='chart-title'>分包队伍往年合同额波动情况</div>
          <chartStackLine
            v-if='rightWrapper2'
            :sourceChartOption='rightWrapper2'
          ></chartStackLine>
        </div>
        <div class='right-wrapper-3'>
          <div class='chart-title'>分包队伍往年合同数波动情况</div>
          <chartStackLine
            v-if='rightWrapper3'
            :sourceChartOption='rightWrapper3'
          ></chartStackLine>
        </div>
      </div>
    </div>
    <y-d-model ref='YDModel' :id="payload.projectId"></y-d-model>
    <select-model ref='selectModel' @getSelectData='getSelectData'></select-model>
  </div>
</template>

<script>
  import {chartPie, chartHalfPie, chartLine, chartStackLine, chartStackBar} from '@/components/BaseCharts/index'
  import selectModel from '../selectModel'
  import {axios} from '@/utils/request'
  import * as lodash from 'lodash'
  import error from '@/assets/hgxjc/lwdwyj/error.png'
  import moment from 'moment'
  import YDModel from '../YDModel'
  import {base64toImg} from '@/mixins/base64toImg'

  export default {
    name: 'index',
    mixins: [base64toImg],
    components: {chartPie, chartHalfPie, chartLine, chartStackLine, selectModel, chartStackBar, YDModel},
    data() {
      return {
        datetoSting: '',
        error: error,
        queryParam: {proId: '', depId: '', date: []},
        selectProject: '1',
        leftWrapper1: {
          chartType: 'chartPie',
          refID: `chartPie1`,
          text: '合同额',
          subText: '100%',
          series: [
            {data: [], name: ''}
          ]
        },
        leftWrapper2: {
          chartType: 'chartPie',
          refID: `chartPie1`,
          text: '',
          subText: '',
          series: [
            {data: [], name: ''}
          ]
        },
        leftWrapper3: {
          chartType: 'chartBar',
          refID: `rightWrapper1`,
          text: '',
          subText: '',
          xAxis: [],
          bottom:60,
          series: [
            {name: '', data: [], notStack: true},
            {name: '', data: [], notStack: true}
          ]
        },
        leftWrapper4: {
          chartType: 'chartLine',
          refID: `chartLine3`,
          text: '',
          subText: '',
          xAxis: [],
          series: [
            {
              name: '',
              data: [],
              color: '#00FEF4'
              // areaStyle: {}
            },
            {
              name: '',
              data: [],
              color: '#38F9C4'
              // areaStyle: {}
            },
            {
              name: '',
              data: [],
              color: '#E4E54C'
              // areaStyle: {}
            },
            {
              name: '',
              data: [],
              color: '#ED8D27'
              // areaStyle: {}
            }

          ]
        },
        rightWrapper1Cols: [
          {
            title: '序号',
            width: 60,
            dataIndex: 'index'
          },
          {
            title: '单位名称',
            scopedSlots: {customRender: 'projDeptNm'},
            dataIndex: 'projDeptNm'
          },
          {
            title: '项目名称',
            scopedSlots: {customRender: 'projNm'},
            dataIndex: 'projNm'
          }
        ],
        rightWrapper1Data: [],
        rightWrapper2: {
          chartType: 'chartLine',
          refID: `chartLine3`,
          text: '',
          subText: '',
          xAxis: [],
          bottom:40,
          series: [
            {
              name: '',
              data: [],
              color: '#00FEF4'
              // areaStyle: {}
            },
            {
              name: '',
              data: [],
              color: '#38F9C4'
              // areaStyle: {}
            },
            {
              name: '',
              data: [],
              color: '#E4E54C'
              // areaStyle: {}
            },
            {
              name: '',
              data: [],
              color: '#ED8D27'
              // areaStyle: {}
            }

          ]
        },
        rightWrapper3: {
          chartType: 'chartLine',
          refID: `chartLine3`,
          text: '',
          subText: '',
          bottom:50,
          /* LineCharts
           * params: XAxis && LineName && Data
           * lineXAxisData: ['String']
           * SeriesData: [{ name: 'type String', // type: 'line', // stack: 'type String', data: 'type Array' }]
           * */
          xAxis: [],
          series: [
            {
              name: '',
              data: [],
              color: '#00FEF4'
              // areaStyle: {}
            },
            {
              name: '',
              data: [],
              color: '#38F9C4'
              // areaStyle: {}
            },
            {
              name: '',
              data: [],
              color: '#E4E54C'
              // areaStyle: {}
            },
            {
              name: '',
              data: [],
              color: '#ED8D27'
            }
          ]
        },
        middleWrapper2Cols: [
          {
            title: '序号',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function (t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '名称',
            dataIndex: 'subEntpNm',
            scopedSlots: {customRender: 'subEntpNm'},
          },
          {
            title: '类别',
            dataIndex: 'typeText'
          },
          {
            title: '总合同金额',
            dataIndex: 'conTotalPrc'
          },
          {
            title: '涉及合同数量',
            dataIndex: 'conNum'
          },
          {
            title: '疑点标记',
            dataIndex: 'blackNum'
          },
          {
            title: '疑点类型',
            dataIndex: 'blackType'
          },
          {
            title: '',
            dataIndex: 'blackFlag',
            scopedSlots: {customRender: 'blackFlag'}
          }
        ],
        middleWrapper2Data: [],
        leftWrapper_selectOption1: [
          {label: '中国中铁', value: '1'},
          {label: '本单位', value: '2'},
          {label: '其他单位', value: '3'}
        ],
        leftWrapper_selectOption2: [
          {label: '全国', value: '1'},
          {label: '本地', value: '2'},
          {label: '其它地域', value: '3'}
        ],
        middleWrapper1: {
          num1: '',
          num2: '',
          num3: ''
        },
        ipagination: {
          current: 1,
          pageSize: 10,
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: false,
          total: 0
        },
        count: 0,
        payload: {},
        leftQuery: {
          isDept: "1",
          isRegion: '1',
          startTime: '',
          endTime: ''
        },
        startYearPickShow: false,
        endYearPickShow: false
      }
    },
    mounted() {
      this.showSelectModel()
    },
    watch: {
      leftQuery: {
        handler() {
          this.fetchLeft3()
        },
        deep: true
      }
    },
    methods: {
      async fetchLeft3(payload) {
        if (payload) {
          this.leftQuery.projectId = payload.projectId
        }
        const ret = await axios.get('/modelTeam/queryColumnList', {params: this.leftQuery})
        let {result} = ret
        const dataShadow = lodash.cloneDeep(this.leftWrapper3)
        let series = []
        if (Array.isArray(result)) {
          series = result.reduce((acc, cur) => {
            acc.push({
              name: cur.name,
              data: cur.data,
              notStack: true
            })
            return acc
          }, [])
        }
        dataShadow.xAxis = result[0].typeList
        dataShadow.series = series
        this.leftWrapper3 = null
        setTimeout(() => {
          this.leftWrapper3 = dataShadow
        }, 100)
      },
      handlePanelStartChange(value) {
        this.startYearPickShow = false
        this.leftQuery.startTime = moment(value).format('YYYY')
      },
      // 弹出日历和关闭日历的回调
      handleOpenStartChange(status) {
        this.startYearPickShow = status
      },
      handlePanelEndChange(value) {
        this.endYearPickShow = false
        this.leftQuery.endTime = moment(value).format('YYYY')
      },
      // 弹出日历和关闭日历的回调
      handleOpenEndChange(status) {
        this.endYearPickShow = status
      },
      moment,
      setClassName(record) {
        if (record.blackFlag === 0) {
          return 'is-black'
        }
      },
      getSelectData(data) {
        this.queryParam = data
        this.datetoSting = this.queryParam.date.toString()
        if (Array.isArray(this.queryParam.date) && this.queryParam.date.length === 2) {
          this.payload = {
            projectId: this.queryParam.proId,
            proName: this.queryParam.proName,
            depId: this.queryParam.depId,
            depName: this.queryParam.depName,
            startTime: this.queryParam.date[0],
            endTime: this.queryParam.date[1]
          }
          this.fetchData(this.payload)
        }
      },
      showSelectModel() {
        if (Object.keys(this.payload).length > 0) {
          let data = lodash.cloneDeep(this.payload)
          data.date = [data.startTime, data.endTime]
          data.proId = data.projectId
          this.$refs.selectModel.edit(data)
        } else {
          this.$refs.selectModel.edit(null)
        }
      },
      deepCopy(data) {
        return JSON.parse(JSON.stringify(data))
      },
      handleTableChange(pagination) {
        this.ipagination = pagination;
        this.fetchMiddle2(this.payload);
      },
      fetchData(payload) {
        this.fetchLeft1(payload)
        this.fetchLeft2(payload)
        this.fetchLeft3(payload)
        this.fetchRight1(payload)
        this.fetchRight2(payload)
        this.fetchRight3(payload)
        this.fetchMiddle1(payload)
        this.fetchMiddle2(payload)
      },
      async fetchMiddle2(payload) {
        const ret = await axios.get('/modelTeam/queryTeamContractList', {
          params: {
            ...payload,
            pageNo: this.ipagination.current,
            pageSize: this.ipagination.pageSize
          }
        })
        let {result} = ret
        this.middleWrapper2Data = result.records
        this.count = result.records.length
        this.ipagination.total = result.total;
      },
      async fetchMiddle1(payload) {
        const ret = await axios.get('/modelTeam/queryTopCount', {params: payload})
        let {result} = ret
        this.middleWrapper1.num1 = result.countTeamNum
        this.middleWrapper1.num2 = result.countBlackNum
        this.middleWrapper1.num3 = result.countConAmount
        console.log(result);
      },
      async fetchRight3(payload) {
        const ret = await axios.get('/modelTeam/queryLineContractNum', {params: payload})
        let {result} = ret
        const dataShadow = lodash.cloneDeep(this.rightWrapper3)
        let series = []
        if (Array.isArray(result)) {
          series = result.reduce((acc, cur) => {
            acc.push({
              name: cur.name,
              data: cur.data
            })
            return acc
          }, [])
        }
        dataShadow.xAxis = result[0].yearList
        dataShadow.series = series
        this.rightWrapper3 = null
        setTimeout(() => {
          this.rightWrapper3 = dataShadow
        }, 100)
      },
      async fetchRight2(payload) {
        const ret = await axios.get('/modelTeam/queryLineContractAmount', {params: payload})
        let {result} = ret
        const dataShadow = lodash.cloneDeep(this.rightWrapper2)
        let series = []
        if (Array.isArray(result)) {
          series = result.reduce((acc, cur) => {
            acc.push({
              name: cur.name,
              data: cur.data
            })
            return acc
          }, [])
        }
        dataShadow.xAxis = result[0].yearList
        dataShadow.series = series
        this.rightWrapper2 = null
        setTimeout(() => {
          this.rightWrapper2 = dataShadow
        }, 100)
      },
      async fetchLeft1(payload) {
        const ret = await axios.get('/modelTeam/queryContractAmount', {params: payload})
        let {result} = ret
        const dataShadow = lodash.cloneDeep(this.leftWrapper1)
        let series = []
        if (Array.isArray(result)) {
          series = result.reduce((acc, cur) => {
            acc.push({
              name: cur.typeText,
              data: [cur.contractAmount]
            })
            return acc
          }, [])
        }
        dataShadow.series = series
        this.leftWrapper1 = null
        setTimeout(() => {
          this.leftWrapper1 = dataShadow
        }, 100)
      },
      async fetchLeft2(payload) {
        const ret = await axios.get('/modelTeam/queryContractNum', {params: payload})
        let {result} = ret
        const dataShadow = lodash.cloneDeep(this.leftWrapper2)
        let series = []
        if (Array.isArray(result)) {
          series = result.reduce((acc, cur) => {
            acc.push({
              name: cur.typeText,
              data: [cur.contractNum]
            })
            return acc
          }, [])
        }
        dataShadow.series = series
        this.leftWrapper2 = null
        setTimeout(() => {
          this.leftWrapper2 = dataShadow
        }, 100)
      },
      async fetchRight1(payload) {
        const ret = await axios.get('/modelTeam/queryBackList', {params: payload})
        let {result} = ret
        if (Array.isArray(result)) {
          result.forEach((item, index) => item.index = index + 1)
          this.rightWrapper1Data = result
        }
      }
    }
  }
</script>

<style scoped lang='less'>

  ::v-deep {
    .is-black {
      box-shadow: rgba(255, 51, 32, 0.97) 0 0 18px inset;
    }

    .ant-table-pagination.ant-pagination {
      margin: 15px 15px 0 0;
    }

    .ant-pagination-item {
      background-color: transparent;
      border: 1px solid transparent;
    }

    .ant-pagination-item-link {
      background: transparent;
      border-color: transparent;
    }

    .ant-pagination-item-active {
      color: #13D4D5;
      background: transparent;
      border: 1px solid #13D4D5;
    }

    .ant-pagination li a {
      color: white !important;
    }

    .ant-pagination {
      color: white;
    }

    .ant-table-body {
      background-color: transparent !important;
    }

    .ant-table-row td {
      padding-top: 11px;
      padding-bottom: 11px;
    }

    .ant-table-header {
      background-color: transparent !important;
      margin-bottom: 0 !important;
      overflow-x: hidden !important;
    }

    .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
      background: rgba(255, 255, 255, 0.7);
      color: black !important;
    }
  }

  .ant-table-wrapper {
    width: 100%;
    background: transparent;

    ::v-deep {
      .ant-table-row {
        color: white;
      }

      .ant-table-placeholder {
        background: transparent;
        border: none;

        * {
          color: white;
        }
      }

      .ant-spin-nested-loading {
        width: 100%;

        th, td {
          border-bottom: none;
        }

        .ant-table-thead {
          background-color: rgba(8, 245, 217, 0.3);
          height: 30px;
          line-height: 0.3;
          color: white;

          * {
            background: transparent;
            color: white;
          }
        }
      }
    }

  }

  .chart-title {
    color: #1cf8ff;
    background-clip: text;
    -webkit-background-clip: text;
    margin-top: 0.2vw;
    margin-left: 0.2vw;
    font-size: 0.8vw;
    font-weight: bold;
  }

  .big-screen-wrapper {
    width: 100%;
    height: calc(100%);
    background: url(~@/assets/hgxjc/lwdwyj/bg.png) no-repeat;
    background-size: cover;
    position: relative;
    display: flex;
    align-content: flex-start;
    justify-content: center;
    flex-direction: column;

    .title-wrapper {
      background: url(~@/assets/hgxjc/lwdwyj/title1.png) no-repeat;
      background-size: 100% 100%;
      position: relative;
      width: 100%;
      height: 100px;
      display: flex;
      align-content: center;
      justify-content: flex-start;
      flex-direction: column;
      padding-top: 1vw;
      margin-bottom: 10px;
      flex-shrink: 0;

      & > * {
        text-align: center;
        font-size: 1vw;
        color: #1cf8ff;
        background-clip: text;
        -webkit-background-clip: text;

        font-weight: bold;
      }

      & > .title {
        font-size: 1.3vw;
      }

      & > .category {
        margin-top: 0.1vw;
        width: 700px;
        margin: 0 auto;

        /deep/ * {
          background: transparent !important;
        }

        /deep/ .ant-input {
          border: 1px solid #13D4D5;
          color: #13D4D5;
        }
      }
    }

    .content-wrapper {
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      overflow: hidden;

      & > div {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        &.middle-wrapper1 {
          flex: 1.5;
          background: url(~@/assets/hgxjc/lwdwyj/middle.png) no-repeat;
          background-size: contain;
          background-position: center center;
          position: relative;
        }

        &.right-wrapper1 {
          background: url(~@/assets/hgxjc/lwdwyj/right.png) no-repeat;
          background-size: contain;
          position: relative;
          background-position: center center;
        }

        &.middle-wrapper2 {
          flex: 1.5;
          background: url(~@/assets/hgxjc/lwdwyj/middle2.png) no-repeat;
          background-size: contain;
          background-position: center center;
          position: relative;
        }

        &.right-wrapper2 {
          background: url(~@/assets/hgxjc/lwdwyj/right2.png) no-repeat;
          background-size: contain;
          position: relative;
          background-position: center center;
        }

        &.left-wrapper {
          flex: 1;
          padding: 0 15px;
          display: flex;
          align-items: flex-start;
          justify-content: flex-start;
          flex-direction: column;

          & > div {
            width: 100%;
            height: 100%;
            flex: 1;
            flex-shrink: 0;
            position: relative;

          }


          .left-wrapper-1 {
            border-radius: 7px;
            padding: 10px;
            background-color: rgba(0, 255, 217, 0.05);
          }

          .left-wrapper-2 {
            border-radius: 7px;
            margin: 5px 0;
            padding: 10px;
            background-color: rgba(0, 255, 217, 0.05);
          }

          .left-wrapper-3 {
            flex: 2.5;
            border-radius: 7px;
            padding: 10px;
            background-color: rgba(0, 255, 217, 0.05);

            & > * {
              width: 100%;
            }

            .select-wrapper {
              margin-top: 8px;
              height: 140px;
              width: 100%;
              color: white;
              display: flex;
              align-items: flex-start;
              justify-content: flex-start;
              flex-direction: column;

              & > .ant-row-flex {
                margin: 10px;
                width: 100%;

                ::v-deep {
                  .ant-calendar-picker-icon {
                    color: #13D4D5 !important;
                  }

                  .ant-calendar-picker-input {
                    background-color: transparent !important;
                    border-color: #02B5B9;
                    padding: 0 10px;
                    height: 22px;
                    color: #13D4D5 !important;

                    input {
                      color: white;
                    }
                  }
                }

                .ant-radio-group {
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: flex-start;
                  overflow: hidden;

                  ::v-deep {
                    & > label {
                      flex-grow: 1;
                      flex-basis: 0;
                    }

                    .ant-radio-inner {
                      border-color: #02B5B9;
                    }
                  }

                  ::v-deep span {
                    color: white;
                    background-color: transparent;
                  }
                }
              }
            }

            .echarts {
              height: 225px;
              overflow: hidden;
              flex-grow: 1;
            }
          }
        }

        &.right-wrapper {
          flex: 1;
          display: flex;
          padding: 0 15px;
          align-items: flex-start;
          justify-content: flex-start;
          flex-direction: column;

          .right-wrapper-1 {
            border-radius: 7px;
            padding: 10px;
            background-color: rgba(0, 255, 217, 0.05);
          }

          .right-wrapper-2 {
            border-radius: 7px;
            margin: 5px 0;
            padding: 10px;
            background-color: rgba(0, 255, 217, 0.05);
          }

          .right-wrapper-3 {
            border-radius: 7px;
            padding: 10px;
            background-color: rgba(0, 255, 217, 0.05);
          }

          & > div {
            position: relative;
            width: 100%;
            flex: 1;
            flex-shrink: 0;
          }
        }

        &.middle-wrapper {
          flex: 2;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          flex-direction: column;

          & > div {
            width: 100%;
          }

          .middle-wrapper-1 {
            flex: 1;
            background: url(~@/assets/lwdwyj/middleBorder.png) no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            width: 100%;

            & > div {
              width: 33%;
              height: 80px;

              &:nth-child(1) {
                background: url(~@/assets/lwdwyj/middle-icon-1.png) no-repeat;
                background-size: contain;
                background-position: center;
              }

              &:nth-child(2) {
                background: url(~@/assets/lwdwyj/middle-icon-2.png) no-repeat;
                background-size: contain;
                background-position: center;
              }

              &:nth-child(3) {
                background: url(~@/assets/lwdwyj/middle-icon-3.png) no-repeat;
                background-size: contain;
                background-position: center;
              }

              //&:nth-child(4) {
              //  background: url(~@/assets/lwdwyj/完工企业.png) no-repeat;
              //  background-size: contain;
              //  background-position: center;
              //}
              //
              //&:nth-child(5) {
              //  background: url(~@/assets/lwdwyj/A级资信.png) no-repeat;
              //  background-size: contain;
              //  background-position: center;
              //}
              //
              //&:nth-child(6) {
              //  background: url(~@/assets/lwdwyj/B级资信.png) no-repeat;
              //  background-size: contain;
              //  background-position: center;
              //}
              //
              //&:nth-child(7) {
              //  background: url(~@/assets/lwdwyj/C级资信.png) no-repeat;
              //  background-size: contain;
              //  background-position: center;
              //}
              //
              //&:nth-child(8) {
              //  background: url(~@/assets/lwdwyj/D级资信.png) no-repeat;
              //  background-size: contain;
              //  background-position: center;
              //}
            }
          }

          .middle-wrapper-2 {
            flex: 3;
          }
        }
      }
    }
  }
</style>